<template>
  <div class="container" @click.stop="showLanguage = false">
    <div class="page_content container-tt">
      <header class="flex_between">
        <div class="headLogo">
          <div class="flex_ shou" @click="goToApp('video')">
            <img
              src="/static/logo.svg"
              class="img"
              alt="logo"
              width="34"
              height="34"
            />
            <span class="projectName">SavingTik</span>
          </div>
        </div>
        <div class="headTabs flex_">
          <!-- <div class="tItem shou" @click="goToApp('video')">
              {{ currentObj.TikTokDownloader }}
            </div> -->
          <div class="tItem shou" @click="goToApp('mp3')">
            Download TikTok MP3
          </div>
          <div class="tItem shou" @click="goToApp('story')">
            Download TikTok Story
          </div>
          <language ref="languageRef" :pageType="true"></language>
        </div>
        <div class="drawer" @click="showAppRightHandel">
          <img src="/static/menu.png" class="img" alt="" />
        </div>
      </header>
      <div class="blog-content">
        <div class="title-content">
          <h1 class="title">{{ bigObj.type }}</h1>
          <h2 class="text">
            Dive into the world of TikTok tutorials and enhance your skills with
            our curated collection of articles. Whether you're a beginner
            looking to grasp the basics or an experienced user aiming to level
            up your TikTok game, our tutorials cover a wide spectrum of topics.
            From crafting eye-catching videos to leveraging the latest trends,
            our content is designed to empower you with the knowledge needed to
            succeed on TikTok. Explore the articles below and embark on a
            journey to become a TikTok expert!
          </h2>
        </div>
        <div class="list-content">
          <div class="list-big">
            <nuxt-link :to="`/blog${bigObj.url}`">
              <div class="cover">
                <img
                  :src="bigObj.imageUrl"
                  class="img"
                  :alt="bigObj.imageDescription"
                />
              </div>
            </nuxt-link>
            <nuxt-link :to="`/blog${bigObj.url}`">
              <h1 class="list-title shou">
                {{ bigObj.articleTitle }}
              </h1>
            </nuxt-link>
            <div class="info flex_">
              <div class="info_1">by</div>
              <div class="info_2 shou">
                <nuxt-link :to="`/blog/author${bigObj.authorUrl}`">
                  <div>{{ bigObj.author }}</div>
                </nuxt-link>
              </div>
              <div class="info_3"></div>
              <div class="info_4">{{ bigObj.updateTime }}</div>
            </div>
          </div>
          <div class="list flex_between">
            <div class="item shou" :key="k" v-for="(item, k) in dataList">
              <nuxt-link :to="`/blog${item.url}`">
                <div class="cover">
                  <img
                    :src="item.imageUrl"
                    class="img"
                    :alt="item.imageDescription"
                  />
                </div>
              </nuxt-link>
              <nuxt-link :to="`/blog${item.url}`">

                <div class="list-title">
                  {{ item.articleTitle }}
                </div>
              </nuxt-link>

                <div class="info flex_">
                  <div class="info_1">by</div>
                  <nuxt-link :to="`/blog/author${item.authorUrl}`">
                    <div class="info_2 shou">
                      {{ item.author }}
                    </div>
                  </nuxt-link>
                  <div class="info_3"></div>
                  <div class="info_4">{{ item.updateTime }}</div>
                </div>
            </div>
          </div>
        </div>
        <div class="pagination flex_center">
          <div class="fr page">
            <div class="sui-pagination clearfix">
              <ul class="flex_" style="">
                <li
                  class="prev"
                  :class="{ disabled: pageNo === 1 }"
                  @click="pageNo > 1 ? getPageNo(pageNo - 1) : null"
                >
                  <div class="left-active shou"></div>
                  <div class="left-disabled shou"></div>
                </li>
                <li
                  v-show="startNumAndEndNum.start > 1"
                  :class="{ active: pageNo === 1 }"
                  @click="getPageNo(1)"
                >
                  <a>1</a>
                </li>
                <li class="dotted" v-show="startNumAndEndNum.start > 2">
                  <span>...</span>
                </li>

                <!-- 中间部分 -->
                <li
                  v-for="(page, index) in pagesArr"
                  :key="index"
                  :class="{ active: pageNo === page }"
                  @click="getPageNo(page)"
                >
                  <a>{{ page }}</a>
                </li>

                <li
                  class="dotted"
                  v-show="startNumAndEndNum.end < totalPage - 1"
                >
                  <span>...</span>
                </li>
                <li
                  v-show="startNumAndEndNum.end < totalPage"
                  :class="{ active: pageNo === totalPage }"
                  @click="getPageNo(totalPage)"
                >
                  <a>{{ totalPage }}</a>
                </li>
                <li
                  class="next"
                  :class="{ disabled: pageNo === totalPage }"
                  @click="pageNo < totalPage ? getPageNo(pageNo + 1) : null"
                >
                  <div class="right-active shou"></div>
                  <div class="right-disabled shou"></div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <!-- <pc-footer></pc-footer> -->
        <div class="bottom_nav flex_between">
          <div class="logo">
            <img src="@/static/big-logo.svg" class="img" alt="SavingTik" />
          </div>
          <div class="nav_list flex_">
            <div class="item">
              <div class="item_title">Company</div>
              <nuxt-link to="/contact">
                <div class="item_text shou">contact</div>
              </nuxt-link>
              <nuxt-link to="/blog">
                <div class="item_text shou">blog</div>
              </nuxt-link>
            </div>
            <div class="item">
              <div class="item_title shou">Legal</div>
              <nuxt-link to="/terms-of-use">
                <div class="item_text">Terms of use</div>
              </nuxt-link>
              <nuxt-link to="/privacy-policy">
                <div class="item_text">Privacy Policy</div>
              </nuxt-link>
            </div>
            <div class="item">
              <div class="item_title">Tools</div>
              <!-- <div @click="goToTools('video')" class="item_text shou">
              {{ currentObj.TikTokDownloader }}
            </div>
            <div @click="goToTools('mp3')" class="item_text shou">
              {{ currentObj.DownloadTikTokMP3 }}
            </div>
            <div @click="goToTools('story')" class="item_text shou">
              {{ currentObj.DownloadTikTokStory }}
            </div> -->
              <nuxt-link to="/save-tiktok-videos-without-posting">
                <div class="item_text shou">
                  How to save tiktok videos without posting
                </div>
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_bottom flex_center">
      ©SavingTik.Com 2023 All Rights Reserved.
    </div>
    <article-content></article-content>
    <div class="app_page_bottom">
      <!-- <app-footer></app-footer> -->
      <div class="hefl flex_center">
        ©SavingTik.Com 2023 All Rights Reserved.
      </div>
      <div class="link flex_ccenter">
        <nuxt-link to="/contact">
          <div>contact</div>
        </nuxt-link>
        <nuxt-link to="/terms-of-use">
          <div class="tr">Terms of use</div>
        </nuxt-link>
        <nuxt-link to="/privacy-policy">
          <div>Privacy Policy</div>
        </nuxt-link>
        <nuxt-link to="/blog">
          <div>blog</div>
        </nuxt-link>
      </div>
    </div>
    <video src="" id="video" autoplay muted v-show="false"></video>
    <div class="dloading" v-if="dloading">
      <div class="loader"></div>
    </div>
    <van-popupapp ref="popupAppRef"></van-popupapp>
    <div class="loading-screen" v-if="loading">
      <svg viewBox="25 25 50 50">
        <circle r="20" cy="50" cx="50"></circle>
      </svg>
    </div>
  </div>
</template>
        
        <script>
import { handleClick } from "@/plugins/Firebase.js";
import language from "@/components/language.vue";
import VanPopupapp from "@/components/vanPopupapp.vue";
import PcFooter from "@/components/pcFooter.vue";
import AppFooter from "@/components/appFooter.vue";
import { mapState, mapGetters, mapMutations } from "vuex";
import dataListTools from "@/static/tools.js";
import CryptoJS from "crypto-js";
import { encryptUrl, decryptUrl } from "~/utils/encryption";

export default {
  components: { language, VanPopupapp, PcFooter, AppFooter },
  head() {
    return {
      title: "TikTok Tutorials  - SavingTik",
      script: this.myScript,
      meta: [
        {
          name: "viewport",
          content:
            "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
        },
        { name: "robots", content: "index, follow" },
        { name: "revisit-after", content: "1 days" },
        {
          name: "description",
          content:
            "Elevate your TikTok presence with our in-depth tutorials. Gain insights into creative content strategies, audience interaction, and advanced features. Transform your TikTok experience today!",
        },
        {
          itemprop: "name",
          content: "TikTok Tutorials  - SavingTik",
        },
        { name: "author", content: "SavingTik" },
        { property: "og:locale", content: "en" },
        { name: "msvalidate.01", content: "" },
        { itemprop: "image", content: "/static/logo/savingtik-thumb.webp" },
        { name: "twitter:card", content: "summary" },
        { name: "twitter:title", content: "TikTok Tutorials  - SavingTik" },
        {
          name: "twitter:description",
          content:
            "Elevate your TikTok presence with our in-depth tutorials. Gain insights into creative content strategies, audience interaction, and advanced features. Transform your TikTok experience today!",
        },
        {
          name: "twitter:image:src",
          content: "/static/logo/savingtik-thumb.webp",
        },
        { name: "twitter:site", content: "SavingTik" },
        { property: "og:title", content: "TikTok Tutorials  - SavingTik" },
        { property: "og:type", content: "article" },
        { property: "og:image", content: "/static/logo/savingtik-thumb.webp" },
        {
          property: "og:description",
          content:
            "Elevate your TikTok presence with our in-depth tutorials. Gain insights into creative content strategies, audience interaction, and advanced features. Transform your TikTok experience today!",
        },
        { property: "og:site_name", content: "SavingTik" },
        { name: "google", content: "notranslate" },
      ],
      link: this.myLinks,
    };
  },
  data() {
    return {
      loading: false,
      myTitle: "",
      myDescription: "",
      myScript: [],
      myLinks: [
        // Favicons
        {
          rel: "shortcut icon",
          href: "/static/logo/favicon.png",
          sizes: "512x512",
        },
        {
          rel: "apple-touch-icon",
          href: "/static/logo/favicon.png",
          sizes: "192x192",
        },
      ],
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      continues: 4,
      // list: dataList.listEn,
      list: [
        {
          isOpen: false,
          title: "Can I Download TikTok Videos Without Posting?",
          textContent: `Absolutely. It's entirely feasible to save TikTok videos to your gallery or camera roll without making them public. This feature is particularly useful for those who wish to review or edit their videos before sharing, or simply keep them for personal archives.`,
        },
        {
          isOpen: false,
          title: "Can I Save a TikTok Video Before Posting?",
          text: [
            `Yes, indeed! You can save your video to drafts, and then follow the steps outlined earlier to save it without posting. This method is perfect for when you're still working on your video or if you decide not to share it but want to keep a copy.`,
          ],
        },
        {
          isOpen: false,
          title: "Will Saving a Video in Private Mode Affect Its Quality?",
          text: [
            `No, saving a TikTok video in private mode does not degrade its quality. The video is saved in the same resolution and quality as it was originally created or uploaded. This ensures that you retain the best version of your creative work, whether for personal use or future editing.`,
          ],
        },
      ],
      input: "",
      dloading: false,
      showAppRight: false,
      showLanguage: false,
      Language: "en_GB",
      isHttpLoading: false,
      downSuccess: false,
      downStorySuccess: false,
      httpError: false,
      downData: {},
      WithoutVideoSize: "",
      duration: "",
      VideoSize: "",
      currentList: dataListTools.list,
      list1: [
        "en", // 英语
        "id", // 印度尼西亚语
        "vn", // 越南语
        "ms", // 马来语
        "jv", // 爪哇语
        "cs", // 捷克语
        "es", // 西班牙语
        "fr", // 法语
        "de", // 德语
        "it", // 意大利语
        "hu", // 匈牙利语
        "nl", // 荷兰语
        "pl", // 波兰语
        "pt", // 葡萄牙语
        "ro", // 罗马尼亚语
        "th", // 泰语
        "tr", // 土耳其语
        "el", // 希腊语
        "uk", // 乌克兰语
        "ru", // 俄语
        "ar", // 阿拉伯语
        "ko", // 韩语
        "ja", // 日语
      ],
    };
  },
  async asyncData({ env }) {
    const pageSize = 10;
    const pageNo = 1;
    const encryptedData = encryptUrl(
      JSON.stringify({
        pageSize: pageSize,
        pageNo: pageNo,
        packageName: "WebTt",
      }),
      env
    );
    try {
      const response = await fetch(
        "https://savingtik.com/js/a/api/cms/web/listData",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ condition: encryptedData }),
        }
      );

      // 确保响应状态是OK的
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const responseJson = await response.json();
      let data = JSON.parse(decryptUrl(responseJson.data, env));
      if (data.list.length == 0)
        return { dataList: [], bigObj: null, total: 0 };
      let Obj = data.list[0];
      data.list.shift();
      let dataList = data.list.map((x) => {
        let date = new Date(x.updateTime);
        let month = date.toLocaleString("en-US", { month: "short" });
        let day = date.getDate();
        let year = date.getFullYear();
        x.updateTime = `${month} ${day}, ${year}`;
        return x;
      });

      return { dataList: dataList, bigObj: Obj, total: data.count };
    } catch (error) {
      console.error(error);
      return { dataList: [], bigObj: {}, total: 0 };
    }
  },
  mounted() {
    this.myLinks.push({
      rel: "canonical",
      href: "https://savingtik.com" + this.$route.path,
    });
  },

  computed: {
    ...mapGetters(["language"]),
    currentObj() {
      return this.currentList[this.current];
    },
    current() {
      return this.list1.findIndex((x) => x == this.language);
    },
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    // 连续页码起始数字与结束数字
    startNumAndEndNum() {
      const { pageNo, continues, totalPage } = this;
      let start = 0;
      let end = 0;
      // 如果总页数少于连续页数
      if (totalPage < continues) {
        start = 1;
        end = totalPage;
      } else {
        start = pageNo - Math.floor(continues / 2);
        end = pageNo + Math.floor(continues / 2);
        // start出现0/负数
        if (start < 1) {
          start = 1;
          end = continues;
        }
        // end大于总页数
        if (end > totalPage) {
          start = totalPage - continues + 1;
          end = totalPage;
        }
      }
      return { start, end };
    },
    pagesArr() {
      let arr = [];
      // 连续页码个数
      arr.length =
        this.totalPage < this.continues ? this.totalPage : this.continues;
      // 第一个连续页码
      let pageNum = this.startNumAndEndNum.start;
      for (let i = 0; i < arr.length; i++) {
        arr[i] = pageNum;
        pageNum++;
      }
      return arr;
    },
  },
  methods: {
    updateTitleAndDescription(newTitle, newDescription, newScript) {
      this.myTitle = newTitle;
      this.myDescription = newDescription;
      if (newScript) {
        this.myScript.push(newScript);
      }
    },
    getCateArticleList() {
      this.loading = true;
      let that = this;
      let type = this.$route.path.replace("/blog/topics/", "");
      let result = this.encryptUrl(
        JSON.stringify({
          pageNo: that.pageNo,
          pageSize: 10,
          type: type,
          packageName: "WebTt",
        })
      );
      fetch("https://savingtik.com/js/a/api/cms/web/listData", {
        method: "POST",
        body: JSON.stringify({
          condition: result,
        }),
        headers: {
          "Content-Type": "application/json",
        },
      }).then((response) => {
        response.json().then(async (data) => {
          this.loading = false;
          data = await this.decryptUrl(data.data);
          let res = JSON.parse(data);
          if (res.list.length == 0) {
            this.$nuxt.error({
              statusCode: 404,
              message: "Post not found",
            });
          } else {
            res.list.forEach((x) => {
              let date = new Date(x.updateTime);
              let month = date.toLocaleString("en-US", { month: "short" });
              let day = date.getDate();
              let year = date.getFullYear();
              x.updateTime = month + " " + day + ", " + year;
            });
            that.bigObj = res.list[0];
            res.list.shift();
            that.dataList = res.list;
            that.total = res.count;
          }
        });
      });
    },
    encryptUrl(input) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
      let KEY_PWD = process.env.DES_CMS_KEY;
      try {
        const keyBytes = CryptoJS.enc.Utf8.parse(KEY_PWD);
        const inputBytes = CryptoJS.enc.Utf8.parse(input);
        const ivBytes = CryptoJS.lib.WordArray.random(IV_SIZE);
        const encrypted = CryptoJS.DES.encrypt(inputBytes, keyBytes, {
          iv: ivBytes,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        });
        const ciphertext = ivBytes.concat(encrypted.ciphertext);
        return ciphertext.toString();
      } catch (error) {
        console.error(error);
        return null;
      }
    },
    decryptUrl(cipherText) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
      let KEY_PWD = process.env.DES_CMS_KEY;
      try {
        let keyBytes = CryptoJS.enc.Utf8.parse(
          KEY_PWD.padEnd(CIPHER_ALGORITHM === "DES-CBC" ? 8 : 16)
        );
        let ivBytes = { iv: CryptoJS.enc.Hex.parse(process.env.DES_CMS_IV) }; // 如果使用CBC模式，需要一个初始化向量iv，这里是空向量
        let decrypted = CryptoJS.DES.decrypt(
          { ciphertext: CryptoJS.enc.Hex.parse(cipherText) },
          keyBytes,
          ivBytes
        );
        return decrypted.toString(CryptoJS.enc.Utf8);
      } catch (e) {
        console.error(e);
        return null;
      }
    },
    getPageNo(newPageNo) {
      this.pageNo = newPageNo;
      this.getCateArticleList();
      // 你也可以在这里加入更多的逻辑
      // 例如，你可能希望用新的页面编号来发送一个新的API请求
    },
    showAppRightHandel() {
      this.$refs.popupAppRef.open();
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
    goToApp(type) {
      let url = "";
      switch (type) {
        case "video":
          url = "";
          break;
        case "mp3":
          url = "/download-tiktok-mp3";
          break;
        default:
          url = "/download-tiktok-story";
      }
      if (this.language !== "en") {
        url = `/${this.language}${url}`;
      } else if (this.language == "en" && type == "video") {
        url = `/`;
      }
      this.$router.push(url);
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "top",
      });
    },
    goToTop(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "top",
      });
    },
    goToTools(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "tools",
      });
    },

    changeLanguage() {
      if (this.$i18n.locale == "en") {
        this.$i18n.setLocale("zh");
      } else {
        this.$i18n.setLocale("en");
      }
    },
    changeFaqItemOpen(item, k) {
      item.isOpen = !item.isOpen;
    },
  },
};
</script>
        <style lang="scss" scoped>
.loading-screen {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  width: 3.25em;
  transform-origin: center;
  animation: rotate4 2s linear infinite;
}

circle {
  fill: none;
  stroke: hsl(214, 97%, 59%);
  stroke-width: 2;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash4 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dashoffset: -125px;
  }
}

button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
@media (min-width: 992px) {
  .container-tt {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .blog-content {
    color: #fff;
    flex: 1;
    padding: 0 30px;
    .title-content {
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(217, 217, 217, 0.15);
      .title {
        margin-top: 40px;
        font-size: 56px;
        font-weight: 700;
      }
      .text {
        margin-top: 20px;
        font-size: 18px;
        color: rgba(255, 255, 255, 0.5);
      }
    }
    .list-content {
      padding-top: 40px;
      .list-big {
        .cover {
          width: 100%;
          height: 380px;
          border-radius: 28px;
          overflow: hidden;
          .img {
            object-fit: cover;
            transition: transform 500ms;
          }
        }
        .cover:hover {
          .img {
            transform: scale(1.1);
          }
        }
        .cate {
          margin: 20px 0 20px;
          font-size: 18px;
          font-weight: 700;
          color: #f9224c;
        }
        .list-title {
          margin-top: 14px;
          font-size: 36px;
          font-weight: 700;
        }
        .list-title:hover {
          text-decoration: underline;
        }
        .info {
          margin-top: 20px;
          font-size: 18px;
          .info_2 {
            color: #3ec5fd;
            margin-left: 6px;
          }
          .info_3 {
            width: 3px;
            height: 3px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            margin: 0 10px;
          }
          .info_4 {
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
      .list {
        padding: 60px 0;
        flex-wrap: wrap;
        align-items: stretch;
        .item {
          width: 47%;
          margin-bottom: 30px;
          .cover {
            overflow: hidden;
            width: 100%;
            height: 250px;
            border-radius: 16px;
            object-fit: cover;
            .img {
              object-fit: cover;
              transition: transform 500ms;
            }
          }
          .cover:hover {
            .img {
              transform: scale(1.1);
            }
          }
          .cate {
            margin: 18px 0;
            font-size: 18px;
            font-weight: 700;
            color: #f9224c;
          }
          .list-title {
            margin-top: 14px;
            font-size: 28px;
            font-weight: 700;
          }
          .list-title:hover {
            text-decoration: underline;
          }
          .info {
            margin-top: 20px;
            font-size: 18px;
            .info_2 {
              color: #3ec5fd;
              margin-left: 6px;
            }
            .info_3 {
              width: 3px;
              height: 3px;
              background: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              margin: 0 10px;
            }
            .info_4 {
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
    .pagination {
      .left-active {
        margin-right: 20px;
        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/prev-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .left-disabled {
        margin-right: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/prev-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .right-active {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/next-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .right-disabled {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/next-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .page {
        display: flex;
        justify-content: center;
        overflow: hidden;

        .sui-pagination {
          margin: 18px 0;

          ul {
            margin-left: 0;
            margin-bottom: 0;

            li {
              line-height: 18px;
              display: inline-block;

              a {
                display: inline-block;
                width: 50px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 18px;
                color: rgba(255, 255, 255, 0.5);
                cursor: pointer;
              }

              &.active {
                a {
                  color: #3ec6ff;
                  cursor: default;
                }
              }

              &.prev {
                .left-active {
                  display: block !important;
                }
                .left-disabled {
                  display: none !important;
                }
                a {
                  margin-left: 0px;
                  background-color: #fafafa;
                }
              }

              &.disabled {
                .left-active {
                  display: none !important;
                }
                .left-disabled {
                  display: block !important;
                }
                .right-active {
                  display: none !important;
                }
                .right-disabled {
                  display: block !important;
                }
                a {
                  color: #999;
                  cursor: default;
                }
              }

              &.dotted {
                span {
                  width: 50px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.5);
                }
              }

              &.next {
                a {
                }
                .right-active {
                  display: block !important;
                }
                .right-disabled {
                  display: none !important;
                }
              }
              &.disabled {
                .right-active {
                  display: none !important;
                }
                .right-disabled {
                  display: block !important;
                }
              }
            }
          }

          div {
            color: #333;
            font-size: 14px;
            float: left;
            width: 80px;
          }
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .container-tt {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
  .blog-content {
    color: #fff;
    flex: 1;
    padding: 0 30px;
    .title-content {
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(217, 217, 217, 0.15);
      .title {
        margin-top: 40px;
        font-size: 56px;
        font-weight: 700;
      }
      .text {
        margin-top: 20px;
        font-size: 18px;
        color: rgba(255, 255, 255, 0.5);
      }
    }
    .list-content {
      padding-top: 40px;
      .list-big {
        .cover {
          width: 100%;
          height: 420px;
          border-radius: 28px;
          overflow: hidden;
          .img {
            object-fit: cover;
            transition: transform 500ms;
          }
        }
        .cover:hover {
          .img {
            transform: scale(1.1);
          }
        }
        .cate {
          margin: 20px 0 20px;
          font-size: 18px;
          font-weight: 700;
          color: #f9224c;
        }
        .list-title {
          font-size: 36px;
          font-weight: 700;
        }
        .list-title:hover {
          text-decoration: underline;
        }
        .info {
          margin-top: 20px;
          font-size: 18px;
          .info_2 {
            color: #3ec5fd;
            margin-left: 6px;
          }
          .info_3 {
            width: 3px;
            height: 3px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            margin: 0 10px;
          }
          .info_4 {
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
      .list {
        padding: 60px 0;
        flex-wrap: wrap;
        align-items: stretch;
        .item {
          width: 47%;
          margin-bottom: 30px;
          .cover {
            overflow: hidden;
            width: 100%;
            height: 280px;
            border-radius: 16px;
            object-fit: cover;
            .img {
              object-fit: cover;
              transition: transform 500ms;
            }
          }
          .cover:hover {
            .img {
              transform: scale(1.1);
            }
          }
          .cate {
            margin: 18px 0;
            font-size: 18px;
            font-weight: 700;
            color: #f9224c;
          }
          .list-title {
            font-size: 28px;
            font-weight: 700;
          }
          .list-title:hover {
            text-decoration: underline;
          }
          .info {
            margin-top: 20px;
            font-size: 18px;
            .info_2 {
              color: #3ec5fd;
              margin-left: 6px;
            }
            .info_3 {
              width: 3px;
              height: 3px;
              background: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              margin: 0 10px;
            }
            .info_4 {
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
    .pagination {
      .left-active {
        margin-right: 20px;
        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/prev-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .left-disabled {
        margin-right: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/prev-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .right-active {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/next-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .right-disabled {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/next-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .page {
        display: flex;
        justify-content: center;
        overflow: hidden;

        .sui-pagination {
          margin: 18px 0;

          ul {
            margin-left: 0;
            margin-bottom: 0;

            li {
              line-height: 18px;
              display: inline-block;

              a {
                display: inline-block;
                width: 50px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 18px;
                color: rgba(255, 255, 255, 0.5);
                cursor: pointer;
              }

              &.active {
                a {
                  color: #3ec6ff;
                  cursor: default;
                }
              }

              &.prev {
                .left-active {
                  display: block !important;
                }
                .left-disabled {
                  display: none !important;
                }
                a {
                  margin-left: 0px;
                  background-color: #fafafa;
                }
              }

              &.disabled {
                .left-active {
                  display: none !important;
                }
                .left-disabled {
                  display: block !important;
                }
                .right-active {
                  display: none !important;
                }
                .right-disabled {
                  display: block !important;
                }
                a {
                  color: #999;
                  cursor: default;
                }
              }

              &.dotted {
                span {
                  width: 50px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.5);
                }
              }

              &.next {
                a {
                }
                .right-active {
                  display: block !important;
                }
                .right-disabled {
                  display: none !important;
                }
              }
              &.disabled {
                .right-active {
                  display: none !important;
                }
                .right-disabled {
                  display: block !important;
                }
              }
            }
          }

          div {
            color: #333;
            font-size: 14px;
            float: left;
            width: 80px;
          }
        }
      }
    }
  }
}
@media (min-width: 1024px) {
  .page_content {
    min-height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    header {
      /* // position: relative; */
      padding: 14px 0;
      z-index: 999;
      .headLogo {
        width: 34px;
        height: 34px;
        .projectName {
          font-size: 21px;
          font-family: Inter-Extra Bold Italic, Inter;
          font-weight: 800;
          font-style: italic;
          color: #ffffff;
          margin-left: 14px;
        }
      }
      .drawer {
        display: none;
      }
      .headTabs {
        .tItem {
          position: relative;
          text-align: right;
          height: 58px;
          font-size: 14px;
          font-family: Poppins-Light, Poppins;
          color: rgba(255, 255, 255, 0.5);
          line-height: 58px;
          margin-left: 70px;

          .expand {
            position: absolute;
            top: 0;
            right: -20px;
            width: 10px;
            height: 8px;
            margin-left: 4px;
          }
          .Language_box {
            position: absolute;
            left: 100px;
            bottom: -200px;
            z-index: 9999;
            width: 162px;
            height: 177px;
            background: rgba(43, 67, 89, 0.15);
            border-radius: 12px;
            overflow-y: scroll;
            padding: 0 14px;
            .item {
              padding: 14px 0;
              border-bottom: 1px solid rgba(125, 125, 125, 0.1);
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              text-align: center;
              line-height: 1;
              .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: rgba(0, 255, 247, 1);
                margin-right: 10px;
              }
            }
            .changeItemColor {
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: #ffffff;
            }
            .item:last-child {
              border: 0;
            }
          }
        }
        .bor {
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }
        .tItemFFF {
          color: #fff;
        }
        .tItemBlod {
          color: #fff;
          font-weight: 700;
          /* // font-family: Poppins-Bold, Poppins; */
        }
      }
    }

    .footer {
      /* // position: relative; */

      margin-top: 300px;
      .bottom_nav {
        align-items: flex-start;
        .logo {
          transform: translate(-10px, -27px);
          width: 132px;
          height: 171px;
        }
        .nav_list {
          align-items: flex-start;
          .item {
            margin-left: 140px;
            width: 200px;

            .item_title {
              margin-bottom: 20px;
              font-size: 18px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
            }
            .item_text {
              margin-bottom: 20px;
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
  }
  .page_bottom {
    margin-top: 30px;
    padding: 40px 0;
    border-top: 2px solid rgba(217, 217, 217, 0.1);
    font-size: 14px;
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.5);
  }
  .app_page_bottom {
    display: none;
  }
}
@media (max-width: 1023px) {
  /* 当设备屏幕宽度小于等于1023像素时，应用其中定义的样式。 */

  .page_content {
    padding: 0 24px;
    min-height: 100vh;
    z-index: 100;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    header {
      /* // position: relative; */
      padding: 14px;
      z-index: 999;
      .headLogo {
        transform: translateX(-14px);
        width: 19px;
        height: 19px;
        .projectName {
          font-size: 12px;
          font-family: Inter-Extra Bold Italic, Inter;
          font-weight: 800;
          font-style: italic;
          color: #ffffff;
          margin-left: 12px;
        }
      }
      .drawer {
        display: block;
        width: 26px;
        height: 26px;
        transform: translateX(14px);
      }
      .headTabs {
        display: none;
        .tItem {
          position: relative;
          width: 220px;
          text-align: right;
          height: 38px;
          font-size: 14px;
          font-family: Poppins-Light, Poppins;
          color: rgba(255, 255, 255, 0.5);
          line-height: 38px;
          .bor {
            position: absolute;
            bottom: -18px;
            left: 82px;
            width: 142px;
            height: 1px;
            background: rgba(255, 255, 255, 0.5);
          }
          .expand {
            position: absolute;
            top: 0;
            right: -20px;
            width: 10px;
            height: 8px;
            margin-left: 4px;
          }
          .Language_box {
            position: absolute;
            left: 100px;
            bottom: -200px;
            z-index: 9999;
            width: 162px;
            height: 177px;
            background: rgba(43, 67, 89, 0.15);
            border-radius: 12px;
            overflow-y: scroll;
            padding: 0 14px;
            .item {
              padding: 14px 0;
              border-bottom: 1px solid rgba(125, 125, 125, 0.1);
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              text-align: center;
              line-height: 1;
              .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: rgba(0, 255, 247, 1);
                margin-right: 10px;
              }
            }
            .changeItemColor {
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: #ffffff;
            }
            .item:last-child {
              border: 0;
            }
          }
        }
        .tItemFFF {
          color: #fff;
        }
        .tItemBlod {
          color: #fff;
          font-weight: 700;
          /* // font-family: Poppins-Bold, Poppins; */
        }
      }
    }
    .blog-content {
      color: #fff;
      flex: 1;
      .title-content {
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(217, 217, 217, 0.15);
        .title {
          margin-top: 20px;
          font-size: 30px;
          font-weight: 700;
        }
        .text {
          margin-top: 20px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.5);
        }
      }
      .list-content {
        padding-top: 40px;
        .list-big {
          .cover {
            width: 100%;
            height: 210px;
            border-radius: 28px;
            overflow: hidden;
            .img {
              object-fit: cover;
              transition: transform 500ms;
            }
          }
          .cover:hover {
            .img {
              transform: scale(1.1);
            }
          }
          .cate {
            margin: 14px 0 14px;
            font-size: 16px;
            font-weight: 700;
            color: #f9224c;
          }
          .list-title {
            margin-top: 16px;
            font-size: 22px;
            font-weight: 700;
          }
          .list-title:hover {
            text-decoration: underline;
          }
          .info {
            margin-top: 14px;
            font-size: 16px;
            .info_2 {
              color: #3ec5fd;
              margin-left: 6px;
            }
            .info_3 {
              width: 3px;
              height: 3px;
              background: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              margin: 0 10px;
            }
            .info_4 {
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
        .list {
          padding: 30px 0;
          flex-wrap: wrap;
          align-items: stretch;
          .item {
            width: 100%;
            margin-bottom: 20px;
            .cover {
              overflow: hidden;
              width: 100%;
              height: 160px;
              border-radius: 16px;
              object-fit: cover;
              .img {
                object-fit: cover;
                transition: transform 500ms;
              }
            }
            .cover:hover {
              .img {
                transform: scale(1.1);
              }
            }
            .cate {
              margin: 14px 0;
              font-size: 16px;
              font-weight: 700;
              color: #f9224c;
            }
            .list-title {
              margin-top: 14px;
              font-size: 16px;
              font-weight: 700;
            }
            .list-title:hover {
              text-decoration: underline;
            }
            .info {
              margin-top: 10px;
              font-size: 16px;
              .info_2 {
                color: #3ec5fd;
                margin-left: 6px;
              }
              .info_3 {
                width: 3px;
                height: 3px;
                background: rgba(255, 255, 255, 0.5);
                border-radius: 50%;
                margin: 0 10px;
              }
              .info_4 {
                color: rgba(255, 255, 255, 0.5);
              }
            }
          }
        }
      }
      .pagination {
        .left-active {
          margin-right: 14px;
          width: 20px !important;
          height: 20px !important;
          background-image: url("@/static/prev-active.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
        .left-disabled {
          margin-right: 14px;

          width: 20px !important;
          height: 20px !important;
          background-image: url("@/static/prev-disabled.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
        .right-active {
          margin-left: 14px;
          width: 20px !important;
          height: 20px !important;
          background-image: url("@/static/next-active.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
        .right-disabled {
          margin-left: 14px;

          width: 26px !important;
          height: 26px !important;
          background-image: url("@/static/next-disabled.webp");
          background-size: 26px 26px;
          background-repeat: no-repeat;
        }
        .page {
          display: flex;
          justify-content: center;
          overflow: hidden;

          .sui-pagination {
            margin: 18px 0;

            ul {
              margin-left: 0;
              margin-bottom: 0;

              li {
                line-height: 18px;
                display: inline-block;

                a {
                  display: inline-block;
                  width: 40px;
                  height: 10px;
                  text-align: center;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.5);
                  cursor: pointer;
                }

                &.active {
                  a {
                    color: #3ec6ff;
                    cursor: default;
                  }
                }

                &.prev {
                  .left-active {
                    display: block !important;
                  }
                  .left-disabled {
                    display: none !important;
                  }
                  a {
                    margin-left: 0px;
                    background-color: #fafafa;
                  }
                }

                &.disabled {
                  .left-active {
                    display: none !important;
                  }
                  .left-disabled {
                    display: block !important;
                  }
                  .right-active {
                    display: none !important;
                  }
                  .right-disabled {
                    display: block !important;
                  }
                  a {
                    color: #999;
                    cursor: default;
                  }
                }

                &.dotted {
                  span {
                    width: 50px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    font-size: 18px;
                    color: rgba(255, 255, 255, 0.5);
                  }
                }

                &.next {
                  a {
                  }
                  .right-active {
                    display: block !important;
                  }
                  .right-disabled {
                    display: none !important;
                  }
                }
                &.disabled {
                  .right-active {
                    display: none !important;
                  }
                  .right-disabled {
                    display: block !important;
                  }
                }
              }
            }

            div {
              color: #333;
              font-size: 14px;
              float: left;
              width: 80px;
            }
          }
        }
      }
    }
    .footer {
      display: none;
      margin-top: 300px;
      .bottom_nav {
        align-items: flex-start;
        .logo {
          transform: translate(-60px, -77px);
          width: 182px;
          height: 182px;
        }
        .nav_list {
          align-items: flex-start;
          .item {
            margin-left: 140px;
            .item_title {
              margin-bottom: 20px;
              font-size: 21px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
            }
            .item_text {
              margin-bottom: 20px;
              font-size: 16px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
  }
  .page_bottom {
    display: none;
    margin-top: 100px;
    padding: 40px 0;
    border-top: 2px solid rgba(217, 217, 217, 0.1);
    font-size: 14px;
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.2);
  }
  .app_page_bottom {
    margin-top: 60px;
    padding: 14px 40px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(217, 217, 217, 0.03);
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.5);
  }
}
.hefl {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  margin-bottom: 12px;
}
.link {
  position: relative;
  font-size: 12px;
  div {
    height: 50px;
    line-height: 50px;
  }
}
</style>